<template>
  <div>
    <cube-form
      :model="model"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
      @reset="resetHandler"
    />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
interface validateRes{
    validity:object,
    valid:(boolean|undefined),
    invalid:boolean,
    dirty:boolean,
    firstInvalidFieldIndex:number
}
@Component
export default class App extends Vue {
    private validity:object={};
    private valid:(boolean|undefined);
    private model={
      checkboxValue: false,
      checkboxGroupValue: [],
      inputValue: '',
      radioValue: '',
      rateValue: 0,
      selectValue: 2018,
      switchValue: true,
      textareaValue: '',
      uploadValue: []
    };

    private schema= {
      groups: [
        {
          legend: '基础',
          fields: [
            {
              type: 'checkbox',
              modelKey: 'checkboxValue',
              props: {
                option: {
                  label: 'Checkbox',
                  value: true
                }
              },
              rules: {
                required: true
              },
              messages: {
                required: 'Please check this field'
              }
            },
            {
              type: 'checkbox-group',
              modelKey: 'checkboxGroupValue',
              label: 'CheckboxGroup',
              props: {
                options: ['1', '2', '3']
              },
              rules: {
                required: true
              }
            },
            {
              type: 'input',
              modelKey: 'inputValue',
              label: 'Input',
              props: {
                placeholder: '请输入'
              },
              rules: {
                required: true
              },
              // validating when blur
              trigger: 'blur'
            },
            {
              type: 'radio-group',
              modelKey: 'radioValue',
              label: 'Radio',
              props: {
                options: ['1', '2', '3']
              },
              rules: {
                required: true
              }
            },
            {
              type: 'select',
              modelKey: 'selectValue',
              label: 'Select',
              props: {
                options: [2015, 2016, 2017, 2018, 2019, 2020]
              },
              rules: {
                required: true
              }
            },
            {
              type: 'switch',
              modelKey: 'switchValue',
              label: 'Switch',
              rules: {
                required: true
              }
            },
            {
              type: 'textarea',
              modelKey: 'textareaValue',
              label: 'Textarea',
              rules: {
                required: true
              },
              // debounce validate
              // if set to true, the default debounce time will be 200(ms)
              debounce: 100
            }
          ]
        },
        {
          legend: '高级',
          fields: [
            {
              type: 'rate',
              modelKey: 'rateValue',
              label: 'Rate',
              rules: {
                required: true
              }
            },
            {
              type: 'upload',
              modelKey: 'uploadValue',
              label: 'Upload',
              events: {
                'file-removed': (...args:any) => {
                  console.log('file removed', args)
                }
              },
              rules: {
                required: true,
                uploaded: (val:any) => {
                  return Promise.all(val.map((file:any, i:any) => {
                    return new Promise((resolve, reject) => {
                      if (file.uploadedUrl) {
                        return resolve()
                      }
                      // fake request
                      setTimeout(() => {
                        if (i % 2) {
                          reject(new Error())
                        } else {
                          file.uploadedUrl = 'uploaded/url'
                          resolve()
                        }
                      }, 1000)
                    })
                  })).then(() => {
                    return true
                  })
                }
              },
              messages: {
                uploaded: '上传失败'
              }
            }
          ]
        },
        {
          fields: [
            {
              type: 'submit',
              label: 'Submit'
            },
            {
              type: 'reset',
              label: 'Reset'
            }
          ]
        }
      ]
    };

    private options= {
      scrollToInvalidField: true,
      layout: 'standard' // classic fresh
    }

    submitHandler (e:any) {
      e.preventDefault()
      console.log('submit', e)
    }

    validateHandler (result:validateRes) {
      this.validity = result.validity
      this.valid = result.valid
      console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
    }

    resetHandler (e:any) {
      console.log('reset', e)
    }
}
</script>
